﻿<html>
<head>
<LINK href = "rails2u.css"  type = "text/css" rel = "stylesheet">
<script src="awsearch.js" type="text/javascript"></script>
<script src="prototype.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
<title>Fast Ajax Book Search</title>
<style>
#searching{
  position:absolute;
  top:0px;
  right:0px;
  padding:0 5px 0 5px;
  background:#F38D75;
  color:#fff;
  font-weight: bold;
}
.asin_img{
  float:left;
  margin:0 30px 10px 0;
}

.asin_img ul{
  padding:0;
  margin-left:30px;
}

.asin_img img{
  border:0;
}

h2.amz {
  clear:both;
  background:#F9FFF6;
  border-bottom:1px solid #ddd;
  border-left:10px solid #FFC754;
  padding:10px;
}


h2{
  clear:both;
  background:#F9FFF6;
  border-bottom:1px solid #ddd;
  border-left:10px solid #C3D9FF;
  padding:10px;
}



h2:first-letter{
  color:#5496FC;
  font-weight:normal;
}

.item{
}

#info{
  background:#E5ECF9;
  border-bottom:1px solid #555;
  margin:10px 0 10px 0;
  padding:4px 4px 4px 10px;
}

#info strong{
  padding:0 2px 0 2px;
}
 

</style>

<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=ABQIAAAAoKLOMWk3lkZ126ktZlDDIRRvkVtGIucbVfbvK3J5RybJROcF8xSiHu2dv9tTSCTxttxQlL_9N6DWjQ" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[

/* This is much faster than using (el.innerHTML = str) when there are many
existing descendants, because in some browsers, innerHTML spends much longer
removing existing elements than it does creating new ones. */

function replaceHtml(el, html) {

        var oldEl = (typeof el === "string" ? document.getElementById(el) : el);

        var newEl = document.createElement(oldEl.nodeName);

        // Preserve the element's id and class (other properties are lost)

        newEl.id = oldEl.id;

        newEl.className = oldEl.className;

        // Replace the old with the new

        newEl.innerHTML = html;

        oldEl.parentNode.replaceChild(newEl, oldEl);
        /* Since we just removed the old element from the DOM, return a reference

        to the new element, which can be used to restore variable references. */

        return newEl;

};



  function OnLoad(search) {
     //Effect.Appear('searching',{duration:0.1,queue:'end'})

        var searchControl = new GSearchControl();
        searchControl.addSearcher(new GbookSearch());
        searchControl.setSearchCompleteCallback(this, em);
        searchControl.draw(document.getElementById("search_control"));
        searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);
        searchControl.execute(search);       
  } 
  
  
  
    function em(sc, searcher) {
    var res = new Array();
    if ( searcher.results && searcher.results.length > 0) {
      for (var i = 0; i < searcher.results.length; i++) {
       var result = searcher.results[i];
       var str = '';
       var url = 'http://www.amazon.com/exec/obidos/ASIN/' + result.bookId.substring(4)  + '/ref%3Dnosim/m1ck-20/';
        str += '<h2><a href="' + url + '">' + result.title + '</a></h2>\n';
        var     img = result.thumbnailHtml.cloneNode(true);
        str += '<div class="asin_img">' + img.innerHTML + '</div>';
        str += '<ul>\n';
        str += '<li>' + result.authors  + '</li>';
        str += '<li>' + result.publishedYear+ '</li>';
        str += '<li>' + result.pageCount  + ' Pages</li>';
        str += '<li>' + result.bookId.substring(4)+ '</li>';
        str += '</ul>\n';   
        res.push(str);

      }
    }
    /*$('result0').innerHTML = '<div class="item">' + res.join('</div><div class="item">') + '</div>'; */
    
    replaceHtml('result0','<div class="item">' + res.join('</div><div class="item">') + '</div>');
    Effect.Fade('searching',{duration:0.5,queue:'end'});
  }
      //]]>
 </script>
</head>
<body>
<h1>Fast Ajax Book Search</h1>
<div id='searching' style='display:none'>
now searching...
</div>
<form action="#" id='search_form' onsubmit='return false;'>
<input type="text" name="keyword" id="keyword" value="" autocomplete="off" tabindex="1">
<select id="searchType" name="searchType">
	
	
	<option value="" SELECTED>Keywords</option>
	<option value="intitle:">Title</option>
	<option value="isbn:">ISBN</option>
	<option value="inauthor:">Author</option>

	
	
</select>
<input type="submit" value="submit">
<input type="reset">
</form>


<div id='result1'>
</div>

<div id='result'>
</div>


    <table  style="DISPLAY: none">
      <tr  style="DISPLAY: none">
        <td  style="DISPLAY: none">
          <div id="search_control" style="DISPLAY: none"/>
        </td>
      </tr>
    </table>
<div id='result0'>
</div>


<br><br><br>
 <div id="footer">
        
        <p><div id='g_footer'><p class="copy" style="TEXT-ALIGN: center">© <i><a title="m1ck" onclick="top.location=&#39;http://www.m1ck.com&#39;;" href="http://www.m1ck.com/" target="_top">2007 m1ck</a></i></p>
<div>


<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-411467-6";
urchinTracker();
</script>

</body>
</html>
<script type="text/javascript">
var dev_token = "1J7R3ZPFZAVE7VH07P82";
var xslt = "http://www.m1ck.com/projects/book-search/9/search.xsl";

var aws = new AWSearch(dev_token, xslt);

var start_time;
aws.options.onCreate = function(){
    start_time = new Date().getTime();
    Effect.Appear('searching',{duration:0.1,queue:'end'})
};
aws.options.onSuccess = function(result){
  var time = (new Date().getTime()) - start_time;
  //Effect.Fade('searching',{duration:0.5,queue:'end'});

  $('result').innerHTML = '<div id="info"> Results 1 - 18 of about <strong>' + result.total + '</strong> for <strong>' + $('keyword').value.escapeHTML() + '  </strong>  (<strong>' + (time / 1000) + '</strong> seconds) </div>';

  var res = new Array();

  var gen_img = function(asin, suffix){
	  var img = document.createElement("img");
	img.src = 'http://ec2.images-amazon.com/images/P/'+ asin + '.01.' + suffix + '.jpg'; 
      return img;
  }

  $A(result.items).each(function(item){
    item = $H(item);
    if(item['title']){
      var str = '';
      with(item){
        str += '<h2 class="amz"><a href="' + url + '" target=_blank>' + title.escapeHTML() + '</a></h2>\n';
        var img = gen_img(asin, '_SCTHUMBZZZ_');         
          img = gen_img(asin, '_SCTHUMBZZZ_');
          img.title = title.escapeHTML();
          img.alt = title.escapeHTML();
          var a = document.createElement('a');
          a.href = url;
          a.appendChild(img);
          var div_img = document.createElement('div');
          div_img.appendChild(a);
          str += '<div class="asin_img">' + div_img.innerHTML + '</div>';
        str += '<ul>\n';
        str += '<li>' + author + '</li>';
        str += '<li>' + manufacturer + '</li>';
        str += '<li>' + asin + '</li>';
        str += '</ul>\n';
      }
      res.push(str);
    }
  });
  /* $('result').innerHTML += '<div class="item">' + res.join('</div><div class="item">') + '</div>'; */
  replaceHtml('result','<div class="item">' + res.join('</div><div class="item">') + '</div>');
};

Event.observe('search_form', 'submit', function(){
  aws.options.mode = 'Books';
  
  aws.options.searchType = 'Keywords';
  
  if (this.searchType.value == 'intitle:')
      aws.options.searchType = 'Title';

  if (this.searchType.value == 'inauthor:')
      aws.options.searchType = 'Author';


  aws.search(this.keyword.value);
  OnLoad(this.searchType.value+this.keyword.value);

}.bindAsEventListener($('search_form')) );
</script>
